<template>
  <div>

    <hr style='border: none'>
    <div>

      <hr style='border: none'>
      <el-form :inline='true' :model='queryForm.data' class='demo-form-inline'>
        <el-form-item>
          <el-input clearable v-model='queryForm.data.name' placeholder='参数名称'></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model='queryForm.data.code' placeholder='参数代码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='queryFormSubmit' icon='el-icon-search'>查询</el-button>
        </el-form-item>
      </el-form>
      <el-button size='small' type='primary' @click="$router.push({name:'sys-param-add-or-update'})" icon='el-icon-plus'>添加</el-button>
      <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete"
                 :disabled="this.multipleSelection.length?false:true">批量删除
      </el-button>
    </div>
    <hr>
    <div>
      <el-table :data='tableData' v-loading='loading' style='width: 100%' ref="multipleTable"
                @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label='序号' type='index'></el-table-column>
        <el-table-column label='参数名' prop='name'></el-table-column>
        <el-table-column label='参数代码' prop='code'></el-table-column>
        <el-table-column label='参数值' prop='value'></el-table-column>
        <el-table-column label='备注' prop='remarks'></el-table-column>
        <el-table-column label='操作' fixed='right' width='200' prop='id'>
          <template slot-scope='scope'>
            <el-button size='small' type='primary'
                       icon='el-icon-edit' @click="$router.push({name:'sys-param-add-or-update',params:{id:scope.row.id}})">编辑
            </el-button>
            <el-button size='small' type='danger' @click='deleteItem(scope.$index, scope.row)'
                       icon='el-icon-delete'>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
                     :current-page='pages.currentPage' :page-sizes='pages.pageSizeList'
                     :page-size='pages.pageSize' layout='total, sizes, prev, pager, next, jumper' :total='pages.total'
                     prev-text='上一页'
                     next-text='下一页' background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loading: false,
        url: {
          queryPage: '/sysParam/query/page',
          delete: 'com/lizhivscaomei/jes/sys/controller/sysParam/delete',
          deleteBatch: '/sysParam/deleteBatch'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          pageSizeList: [20, 40, 100]
        },
        tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            name: '',
            code: '',
            currentPage: 1,
            pageSize: 10
          }
        },
        multipleSelection: []
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = []
        val.forEach(item => {
          this.multipleSelection.push(item.id)
        })
      },
      handleSizeChange: function (val) {
        this.pages.pageSize = val
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.pages.currentPage = val
        this.queryFormSubmit()
      },
      deleteBatch () {
        this.$confirm('此操作将删除参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.deleteBatch), {params: {ids: this.multipleSelection.join(',')}}).then(
            () => {
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1500,
                onClose: () => {
                  this.queryFormSubmit()
                }
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      queryFormSubmit: function () {
        this.queryForm.data.currentPage = this.pages.currentPage
        this.queryForm.data.pageSize = this.pages.pageSize
        this.loading = true
        this.$http.get(this.$http.adornUrl(this.url.queryPage), {params: this.queryForm.data}).then(({data}) => {
          this.loading = false
          this.tableData = data.list
          this.pages.total = data.total
        })
      },
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除' + row.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http.get(this.$http.adornUrl(this.url.delete), {params: {id: row.id}})
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 1500,
              onClose: () => {
                this.queryFormSubmit()
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },

    activated: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>

</style>
